<template>
  <el-tabs type="border-card" :model-value="activeNamed" @tab-click="handleClickTabs" style="margin-top:0;">
    <el-tab-pane label="点播介质" name="vod" v-if="videotype != 'live'">
      <el-form
              ref="vodVideoFormRef"
              :model="videoFormData"
              label-width="100px"
              :rules="vodVideoRules"
      >
        <el-form-item label="视频名称" prop="name">
          <el-input placeholder="请输入视频介质名称" v-model="videoFormData.name" />
        </el-form-item>
        <el-form-item label="视频地址" prop="url">
          <el-input placeholder="请输入视频介质URL地址" v-model="videoFormData.url" />
        </el-form-item>
        <el-form-item label="文件类型" prop="mimetype">
          <el-select placeholder="请选择视频介质的文件类型" v-model="videoFormData.mimetype">
            <el-option
                    v-for="mime in videoMimeTypeList"
                    :key="mime.mimeid"
                    :value="mime.mimeid"
                    :label="mime.mimename"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="画幅类型" prop="layout">
          <el-select placeholder="请选择视频介质的画幅类型" v-model="videoFormData.layout">
            <el-option
                    v-for="lay in layoutList"
                    :key="lay.layoutid"
                    :label="lay.layoutname"
                    :value="lay.layoutid"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="直播介质" name="live" v-if="videotype != 'vod'">
      <el-form
              ref="liveVideoFormRef"
              :model="videoFormData"
              label-width="120px"
              :rules="liveVideoRules"
              style="height: 350px;overflow-y: auto; width: 100%;padding-right:10px;"
      >
        <el-form-item label="视频名称" prop="name">
          <el-input placeholder="请输入视频介质名称" v-model="videoFormData.name" />
        </el-form-item>
        <el-form-item label="视频地址" prop="url">
          <el-input placeholder="请输入视频介质URL地址" v-model="videoFormData.url" />
        </el-form-item>
        <el-form-item label="直播协议" prop="protocol">
          <el-select placeholder="请选择直播协议" v-model="videoFormData.protocol">
            <el-option
                    v-for="protocol in videoProtocolList"
                    :key="protocol.protocolid"
                    :label="protocol.protocolname"
                    :value="protocol.protocolid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="直播时移地址" prop="shifturl">
          <el-input placeholder="请输入直播时移URL地址" v-model="videoFormData.shifturl" />
        </el-form-item>
        <el-form-item label="直播回看地址" prop="reviewurl">
          <el-input placeholder="请输入直播回看地址或文件FID" v-model="videoFormData.reviewurl" />
        </el-form-item>
        <el-form-item label="文件类型" prop="mimetype">
          <el-select placeholder="请选择视频介质的文件类型" v-model="videoFormData.mimetype">
            <el-option
                    v-for="mime in videoMimeTypeList"
                    :key="mime.mimeid"
                    :value="mime.mimeid"
                    :label="mime.mimename"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="画幅类型" prop="layout">
          <el-select placeholder="请选择视频介质的画幅类型" v-model="videoFormData.layout">
            <el-option
                    v-for="lay in layoutList"
                    :key="lay.layoutid"
                    :label="lay.layoutname"
                    :value="lay.layoutid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="直播推流地址" prop="pushurl">
          <el-input placeholder="请输入直播推流URL地址" v-model="videoFormData.pushurl" />
        </el-form-item>

        <el-form-item label="直播状态" prop="livestate">
          <el-select placeholder="请选择直播状态" v-model="videoFormData.livestate">
            <el-option
                    v-for="livestate in livestateList"
                    :key="livestate.stateid"
                    :value="livestate.stateid"
                    :label="livestate.statename"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="直播开始时间" prop="starttime">
          <el-date-picker
                  v-model="videoFormData.starttime"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择直播开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="直播结束时间" prop="endtime">
          <el-date-picker
                  v-model="videoFormData.endtime"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择直播结束时间"
          />
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import {reactive, ref, toRef} from 'vue'
  import {
    layoutList,
    videoMimeTypeList,
    videoProtocolList,
    livestateList
  } from "@/utils/usage-config";

  export default {
    name: "NetworkMedium",
    props: {
      createVideoFormData: {
        type: Object
      },
      createVideoActiveName: {
        type: String,
        default: 'vod'
      },
      videotype: {
        type: String,
        default: undefined
      }
    },
    emits: ['changeActiveName'],
    setup(props, context) {
      const videoFormData = toRef(props, 'createVideoFormData')
      const activeNamed = toRef(props,'createVideoActiveName')
      const liveVideoRules = reactive({
        name: [{required: true, message: '请输入视频介质名称', trigger: 'blur'}],
        url: [{required: true, message: '请输入视频介质URL地址', trigger: 'blur'}],
        protocol: [{required: true, message: '请选择直播协议', trigger: 'change'}]
      })
      const vodVideoRules = reactive({
        name: [{required: true, message: '请输入视频介质名称', trigger: 'blur'}],
        url: [{required: true, message: '请输入视频介质URL地址', trigger: 'blur'}],
        mimetype: [{required: true, message: '请选择视频介质文件类型', trigger: 'change'}],
      })
      const vodVideoFormRef = ref(null)
      const liveVideoFormRef = ref(null)

      const handleClickTabs = (tab) => {
        resetCreateVideoFormData()
        context.emit('changeActiveName', tab.props.name)
        videoFormData.value.videotype = tab.props.name
        vodVideoFormRef.value.clearValidate()
        liveVideoFormRef.value.clearValidate()
      }
      const resetCreateVideoFormData = () => {
        videoFormData.value.name = ''
        videoFormData.value.url = ''
        videoFormData.value.mimetype = ''
        videoFormData.value.layout = ''
        videoFormData.value.groupid_list = [0]
        videoFormData.value.pushurl = ''
        videoFormData.value.shifturl = ''
        videoFormData.value.reviewurl = ''
        videoFormData.value.protocol = ''
        videoFormData.value.livestate = ''
        videoFormData.value.starttime = ''
        videoFormData.value.endtime = ''
      }
      const init = () => {
        if (props.videotype) {
          context.emit('changeActiveName', props.videotype)
          if (props.videotype == 'live') {
            liveVideoFormRef.value.clearValidate()
          } else {
            vodVideoFormRef.value.clearValidate()
          }
        } else {
          context.emit('changeActiveName', 'vod')
          vodVideoFormRef.value.clearValidate()
          liveVideoFormRef.value.clearValidate()
        }
      }

      return {
        videoFormData,
        activeNamed,
        liveVideoRules,
        vodVideoRules,
        vodVideoFormRef,
        liveVideoFormRef,
        layoutList,
        videoMimeTypeList,
        videoProtocolList,
        livestateList,
        handleClickTabs,
        init
      }
    }
  }
</script>

<style scoped>

</style>
